<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
</head>

<body>
    <!-- 3、编写被vue实例控制的视图 - //这里就是MVVM中的View:视图 -->
    <!-- {{ }}：vue的 插值表达式（数据文本渲染） -->
    <div id="app">{{message}}</div>
</body>

</html>
<!-- 1、导入vue3的包 -->
<script src="js/vue3.4.21.js"></script>
<!-- 2、编写vue基本的代码结构-->
<script>
    //使用ES6的解构赋值从Vue包中取出createApp，ref两个方法
    const {
        createApp,
        ref
    } = Vue

    //创建了一个vue的实例（使用createApp函数创建了一个新的应用实例App）
    //这里就是MVVM中的ViewModel:观察者
    createApp({
            //在vue实例初始化完成之后执行的一个方法，在这个方法之中去定义数据、编写函数业务
            setup() {
                //ref是vue中定义响应式数据的一个方法
                //这里就是MVVM中的Model:数据模型
                const message = ref("Hello Vue2")

                //切记：在setup方法中定义的数据和函数方法必须在return中返回才可以使用
                return {
                    message
                }
            }
        }).mount("#app") //挂载id为app的视图模版

    //调用使用js实例文本显示功能
    //1、获取id为app的Dom元素
    //2、定义变量数据，修改Dom元素的文本内容innerText
    //3.如果要修改数据内容，需要重新获取dom再次进行赋值
    //对比vue的数据双向绑定设计观念来说，vue还是十分方便的
</script>